<template>
  <div class="acc">
    <!--
      el-tabs
        v-model 对应 name 缺一不行,要么不写(一般写,只是修改默认项)
        label 标题目

    -->
    <el-card>
      <el-tabs v-model="active">
        <el-tab-pane label="角色管理" name="1">

          <el-button type="primary" style="margin-bottom: 20px;" @click="addEvsa">添加角色</el-button>

          <el-table :data="list" width="100%" border>
            <el-table-column label="序号" width="100px" align="center">
              <template v-slot="{$index}">
                <!-- {{ 页码*页容量+下标+1 }} -->
                {{ (x.page-1)*x.pagesize+$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="名称" align="center" prop="name" />
            <el-table-column label="描述" align="center" prop="description" />
            <el-table-column label="操作" align="center">
              <template v-slot="{row}">
                <div>
                  <el-button type="primary" @click="fptck(row)">分配权限</el-button>
                  <el-button type="primary" @click="bj(row)">编辑</el-button>
                  <el-button type="primary" @click="del(row)">删除</el-button>
                </div>
              </template>

            </el-table-column>
          </el-table>

          <el-pagination
            style="text-align: center;margin-top: 15px;"
            :current-page.sync="x.page"
            :page-sizes="[1,5,10,100, 200, 300, 400]"
            :page-size.sync="x.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="zonsh"
            @size-change="fghjkl"
            @current-change="getadd"
          />
        </el-tab-pane>

        <el-tab-pane label="公司消息" name="2" lazy><gsss /></el-tab-pane>
      </el-tabs>

      <!-- 分页处理
           layout 布局
             total 总数，sizes页容量选项，prev页码，text下一页，jumper跳转那一页
           total 总数
           current-page 当前页
           page-size    页容量值
           page-sizes   页容量选项

          :current-page.sync="x.page"  进行数据双向绑定。sync

           @size-change     页容量改变监听  (重新发送请求)
           @current-change  当前页发生改变   (重新发送请求)

           封装api
           导入api
           拿到数据进行存储，渲染
           建立关联
              将总数应用到分页器
              将页容量，当前页应用到分页器
              将数据重新请求

      -->
      {{ x }}

    </el-card>
    <!--
      添加角色
         创建一个弹出框组件
         完成弹出框布局
         完成校验
         导入组件
         点击组件打开弹出框
         导入api
         在弹出框中完成请求
           请求成功 关闭弹出框
           清空表单提示
           刷新数据

      删除角色
         点击弹出框
         导入api
         确认调用api
            提示
            刷新数据(判断当前页数据等于1和总页数大于1 页码-- 处理)

      改
         打开弹出框
         回显数据(深拷贝)
            当前行可以拿到数据（深拷贝）
            发送请求拿到数据
         在弹出框组件创建一个mode标识变量(区分场景)
         在新增和编辑点击修改mode标识
         利用mode来修改弹出框标题
         表单如果需要修改则修改
         定义导入aip (分场景)
            调用成功
              关闭弹出框
              提示
              刷新数据

      分配角色权限
          1.封装弹出框
          2.定义导入弹出框
          3.打开弹出框
          4.完成弹出框内容
          5.回显数据
              1.点击当前可获得数据(需要深拷贝)
              2.发送请求拿到数据
          6.定义导入api
          7.调用成功
              1.提示
              2.当前数据关联到父级数据需要刷新
              3.清空数据
              4.关闭弹出框
    -->

    <!-- 新镇 -->
    <add ref="add" @getadd="getadd" />
    <!-- 分配权限 -->
    <FpTck ref="FpTck" />
  </div>
</template>

<script>
import add from './components/add'
import { sysrole, delsDELETE } from '@/api/gonshi'
export default {
  // 异步组件（路由懒加载 优化性能）
  components: {
    add,
    gsss: () => import('./components/gsss'),
    FpTck: () => import('./components/fptck.vue')
  },
  data() {
    return {
      active: '1',
      list: [],
      // 页容量，当前页进行双向绑定，进行传常数
      x: {
        page: 1,
        pagesize: +localStorage.getItem('sum') || 1
      },
      zonsh: 0
    }
  },
  created() {
    this.getadd()
  },
  methods: {

    // 分配权限
    fptck(row) {
      this.$refs.FpTck.show = true
      // 完成内容布局
      this.$refs.FpTck.getdata()
      // 回显数据
      this.$refs.FpTck.fpqxhx(row.id)
    },
    async getadd() {
      const res = await sysrole(this.x)
      console.log(res)
      // 存储数据
      this.list = res.data.data.rows
      this.zonsh = res.data.data.total
    },
    // 添加角色
    addEvsa() {
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 删除角色
    async del(row) {
      await this.$confirm(`确认删除${row.name}`, '删除提示')
      await delsDELETE(row.id)
      // 没有刷新数据前当前的数据还是有保留的
      // 判断当前页数据是否是===1 和是否大于1页在做判断 --
      if (this.list.length === 1 && this.page > 1) {
        this.page--
      }

      // 不判断如果是最后一条数据，还是会请求当前页的数据，结果显示暂无数据
    },
    // 编辑
    bj(row) {
      this.$refs.add.show = true
      this.$refs.add.mode = 'bj'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 页容量持久化 - 用户体验
    fghjkl() {
      // 发生改变 存储
      localStorage.setItem('sum', this.x.pagesize)
      this.getadd()
    }

  }

}
</script>

<style>

</style>
